<template>
    <div class="short-video-page">
        <div style="display: flex; justify-content: flex-start;">
            <div style="flex: 1;width: 90%;">
                <pswiper wrapclass="nav-cates" :betn="20" ref="refSwCate" :slides="12" prevclass="cate-page-prev"
                    nextclass="cate-page-next" id="cateSwp">
                    <li class="swiper-slide"><a>全部</a></li>
                    <li class="swiper-slide"><a>游戏</a></li>
                    <li class="swiper-slide"><a>截图</a></li>
                    <li class="swiper-slide"><a>短视频</a></li>
                    <li class="swiper-slide"><a>作品</a></li>
                    <li class="swiper-slide"><a>国风</a></li>
                    <li class="swiper-slide"><a>卡牌</a></li>
                    <li class="swiper-slide"><a>动作</a></li>
                    <li class="swiper-slide"><a>国风</a></li>
                    <li class="swiper-slide"><a>作品</a></li>
                    <li class="swiper-slide"><a>国风</a></li>
                    <li class="swiper-slide"><a>卡牌</a></li>
                    <li class="swiper-slide"><a>动作</a></li>
                    <li class="swiper-slide"><a>国风</a></li>
                    <li class="swiper-slide"><a>卡牌</a></li>
                    <li class="swiper-slide"><a>卡牌</a></li>
                    <li class="swiper-slide"><a>最新上传</a></li>
                    <li class="swiper-slide"><a>令您跟前一亮的</a></li>
                </pswiper>
                <!-- <ul class="nav-cates swiper-container" ref="mySwiper">
                    <div class="swiper-wrapper">
                    </div>
                    <div class="swiper-button-prev cate-page-prev" @click="handlePrev"></div>
                    <div class="swiper-button-next cate-page-next" @click="handleNext"></div>

                </ul> -->
            </div>
            <!-- <div class="screenbtn">筛选</div> -->
            <!-- <div class="bs-g-flabel">
                <span class="cur">筛选</span>
                <div class="games-filter gpic-flt" style="width:546px">
                    <div class="games-filter-wrap">
                        <div class="filter-g-tab">
                            <span :class="index == 0 ? 'active' : ''" v-for="(item, index) in gTypesT">{{ item }}</span>
                        </div>
                        <div class="gft-data-box">
                            <div class="tip-top">登录界面</div>
                            <ul class="data-ul">
                                <li v-for="(type, i) in gTypes" :key="i" @click="type.selected = !type.selected"
                                    v-if="type.title != '全部'"><a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
                            </ul>
                        </div>
                        <div class="gft-data-box">
                            <div class="tip-top">主界面</div>
                            <ul class="data-ul">
                                <li v-for="(type, i) in gTypes1" :key="i" @click="type.selected = !type.selected"
                                    v-if="type.title != '全部'"><a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
                            </ul>
                        </div>
                        <div class="gft-data-box">
                            <div class="tip-top">选项设置</div>
                            <ul class="data-ul">
                                <li v-for="(type, i) in gTypes2" :key="i" @click="type.selected = !type.selected"
                                    v-if="type.title != '全部'"><a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
                            </ul>
                        </div>
                        <div class="gft-data-box">
                            <div class="tip-top">系统提示</div>
                            <ul class="data-ul">
                                <li v-for="(type, i) in gTypes3" :key="i" @click="type.selected = !type.selected"
                                    v-if="type.title != '全部'"><a :class="{ 'active': type.selected }">{{ type.title }}</a></li>
                            </ul>
                        </div>

                        <div class="bot-btns">
                            <a class="cancel" @click="handleCancelByGtypeAll">全部取消</a>
                            <a class="confirm" @click="handleConfirmByGTypeSearch">确定</a>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="video-play-wrap" :class="{'is-full':isFull}" id="video_play_wrap">
            <a class="global-vclose" @click="handleFull" v-if="isFull"></a>
            <ul class="video-list-box" :class="isStart ? 'animateClass' : ''"
                :style="'transform:translate3d(0px,' + transMoveY + 'px,0px)'" ref="videoSwiper">
                <!-- <div v-for="(item,idx) in list" :key="idx" class="swiper-slide video-data-item"   > -->
                <!-- <div class="swiper-wrapper"> -->
                <div v-for="(item, idx) in list" :key="idx" class="video-data-item" @mousewheel="onWheel"
                    @mouseleave.prevent="onEnd($event, idx)" @mousedown.prevent="onStart"
                    @mouseup.prevent="onEnd($event, idx)" @mousemove.prevent="onMove">
                    <div class="left">
                        <!-- <span style="font-size:29px;margin:100px;">{{idx}}</span> -->
                        <div class="cover-blur">
                            <img loading="lazy" :src="item.image" alt="">
                        </div>
                        <XgpVideo ref="ref_video" :idx="idx" :src="item.src" :playIdx="playIdx" @end="onPlayEnd" @ended="onPlayEnd"/>
                        <!-- <video :playbackRate="playbackRate" :src="item.src" :poster="item.image" preload="none" :muted="false" ref="video"></video> -->
                        <!-- <div class="xgp-video">
                                
                            </div> -->
                        <div class="right-bar">
                            <div class="page-bar" v-if="isFull">
                                <button class="prev" @click="handleVPrev"></button>
                                <button class="next" @click="handleVNext"></button>
                            </div>
                            <a class="u-box">
                                <img loading="lazy"
                                    v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }" />
                                <i class="aten-btn"
                                    v-if="item.member.isSubscribe == 0 && currentUser.id != item.member.id"></i>
                            </a>
                            <a class="zan" @click.stop="handlePraiseVideo(item)"
                                :class="{ 'active': item.praiseCount > 0 }">{{ item.praise }} <span
                                    class="cus-tooltip">喜欢</span></a>
                            <a class="comment" @click.stop="handleCollapse(item, true, 2)">{{ item.commentNum }}<span
                                    class="cus-tooltip">评论</span></a>
                            <a class="fav" @click.stop="videoItem = item; videoId = item.id; showFav = true;">{{
                                item.collectNum }}<span class="cus-tooltip">收藏</span></a>
                            <a class="share" @click.stop="showShare = true"><span class="cus-tooltip">分享</span></a>
                            <a class="more" @click.stop="showReport = true"></a>
                        </div>
                        <div class="basic">
                            <div class="author">@{{ item.member.userName }}<span class="time">6天前发布</span></div>
                            <div class="title">{{ item.title }}</div>
                            <div class="progress-bar" v-if="false">
                                <el-slider :show-tooltip="false" v-model="item.progressno" :min="0"
                                    :max="2000"></el-slider>
                            </div>
                        </div>

                        <div class="bar-row">
                            <div class="laction">
                                <a class="play-btn" :class="{ 'active': isPlay }"
                                    @click="handlePlayControl(item, idx)"></a>
                            </div>
                            <div class="r-actions">
                                <a class="auto-l-play">自动连播<el-switch class="switch" v-model="isLplay"
                                        active-color="#11CCB1"></el-switch></a>
                                <a class="fun-bs">{{playbackRate==1?'倍速':playbackRate}}
                                    <span class="b-wrap">
                                        <span class="b-con-box">
                                            <a class="speed-item" :class="{ 'active': playbackRate == 0.75 }"
                                                @click.stop="chooseRate(0.75, idx)">0.75x</a>
                                            <a class="speed-item" :class="{ 'active': playbackRate == 1 }"
                                                @click.stop="chooseRate(1, idx)">1.0x</a>
                                            <a class="speed-item" :class="{ 'active': playbackRate == 1.25 }"
                                                @click.stop="chooseRate(1.25, idx)">1.25x</a>
                                            <a class="speed-item" :class="{ 'active': playbackRate == 1.5 }"
                                                @click.stop="chooseRate(1.5, idx)">1.5x</a>
                                            <a class="speed-item" :class="{ 'active': playbackRate == 2 }"
                                                @click.stop="chooseRate(2, idx)">2.0x</a>
                                        </span>
                                    </span>
                                </a>
                                <a class="vol-btn-wrap">
                                    <i class="vol-btn" :class="{ 'muted': vol == 0 }" @click.stop="handleMuted"></i>
                                    <span class="b-wrap">
                                        <span class="b-con-box">
                                            <span class="val">{{ vol }}</span>
                                            <el-slider :show-tooltip="false" vertical :min="0" :max="1"
                                                @change="onVolChange" v-model="vol" :step="0.1"></el-slider>
                                        </span>
                                    </span>
                                </a>
                                <a class="full-screen-btn" @click.stop="handleFull"></a>
                                <!-- <a class="full-screen-btn" @click.stop="handleFull(item)"></a> -->
                            </div>
                        </div>
                        <div class="bot-mask">

                        </div>
                        <!-- <div class="all-mask" v-if="isStart">

                        </div> -->
                    </div>
                    <div class="fixed-right-conbox" :class="{ 'active': isCollapse }" @mouseenter.stop="onItemDragStart"
                        @mousemove.stop="onItemDragStart" @dragenter.stop="onItemDragStart">
                        <a class="collapse-rbar" @click.stop="handleCollapse(item)" v-if="!isFull"></a>
                        <div :class="['n-box', isCollapse ? 'show' : '']">
                            <div class="tabs">
                                <span :class="{ 'active': tab == 1 }" @click="tab = 1">他的作品</span>
                                <span :class="{ 'active': tab == 2 }" @click="tab = 2">评论</span>
                            </div>
                            <div class="tab-work" v-if="tab == 1">
                                <div class="author">
                                    <div class="left">
                                        <a class="img-box">
                                            <img loading="lazy"
                                                v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }">
                                        </a>
                                        <div class="basic">
                                            <div class="name">{{ item.member.userName }}</div>
                                            <div class="desc">{{ item.member.fansStr }} 粉丝 | {{ item.member.praiseStr }}
                                                获赞
                                            </div>
                                        </div>
                                    </div>
                                    <a class="follow-btn" v-if="item.member.id != userId">关注</a>
                                </div>
                                <div class="work-list-wrap">
                                    <div class="work-list">
                                        <a class="work-item" :class="currentVideoId == v.id ? 'played' : ''"
                                            v-for="(v, vdx) in currentRightVideos" :key="vdx" @click="handlePlay(v)">
                                            <img loading="lazy" :src="v.image" alt="">
                                            <div class="basic-con">
                                                <span class="fav">{{ v.praiseCount }}</span>
                                            </div>

                                            <div class="played-text">
                                                播放中
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-work" v-if="tab == 2">
                                <div class="total-comment">全部评论({{ currentRightCommentTotal }})</div>
                                <div class="comment-list">
                                    <div>
                                        <div class="comment-item" v-for="(cmt, idx) in currentRightComments" :key="idx">
                                            <div class="img-box">
                                                <a><img loading="lazy"
                                                        v-aimgd="{ avatar: cmt.member.avatar, id: cmt.member.id, w: 34, name: cmt.member.userName }" /></a>
                                            </div>
                                            <div class="con-box">
                                                <div class="uname">
                                                    {{ cmt.member.userName }}
                                                </div>
                                                <div class="con-descr" v-html="cmt.content">

                                                </div>
                                                <div class="time">
                                                    {{ cmt.intervalTimeStr }}
                                                </div>
                                                <div class="nums">
                                                    <span class="cmt">96666</span>
                                                    <span class="share">96666</span>
                                                    <span class="zan">{{ cmt.praiseStr }}</span>
                                                </div>
                                                <!-- <div class="sub-comments">
                                                        <div class="comment-item" v-for="j in 6" :key="j">
                                                            <div class="img-box">
                                                                <a>
                                                                    <img loading="lazy" src="https://img.gameui.net/avatar-54-45690b@1x36.webp" alt="">
                                                                </a>
                                                            </div>
                                                            <div class="con-box">
                                                                <div class="uname">
                                                                    张牙舞爪
                                                                </div>
                                                                <div class="con-descr">
                                                                    总是来看看！~
                                                                </div>
                                                                <div class="nums">
                                                                    <span class="cmt">96666</span>
                                                                    <span class="share">96666</span>
                                                                    <span class="zan">96666</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button>
                                                            <div class="line"></div>
                                                            <div class="btn-text">展开7条回复</div>
                                                        </button>
                                                    </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <form @submit.prevent="() => { return false; }" class="send-mbox">
                                    <span class="u-img">
                                        <img loading="lazy"
                                            v-aimgd="{ avatar: currentUser.avatar, id: currentUser.id, w: 34, name: currentUser.userName }">
                                    </span>
                                    <div class="right">
                                        <input autocomplete="off" type="text" id="vcmtval"
                                            @mousedown.stop="(e) => { return true; }"
                                            @mouseup.stop="(e) => { return true; }" v-model="cmtVal"
                                            placeholder="发布你的评论">
                                        <div class="opbtns">
                                            <Face txtId="vcmtval" @change="(v) => { cmtVal = v; }" mod="topsend" />
                                            <!-- <a class="face-btn"></a> -->
                                            <a class="send-btn" @click="handleSend(item)"></a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- </div> -->
                </div>
            </ul>
            <ShareTo v-if="showShare" @close="showShare = false" />
            <Report v-if="showReport" @close="showReport = false" />
        </div>
        <div class="page-bar">
            <button class="prev" @click="handleVPrev"></button>
            <button class="next" @click="handleVNext"></button>
        </div>

        <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
            <Fav favmodule="VIDEO" @close="showFav = false" :foldertype="2" :imgids="videoId" @favsucc="onFavSucc" />
        </a-modal>

        <PlayVideo v-if="showPlay" :data="currentItem" @close="onPlayClose" />
    </div>
</template>

<script>

import PlayVideo from '@/components/playvideo'
import pswiper from '@/components/pswiper'
import Face from '@/components/face'
import Fav from '@/components/Fav'
import SparkMD5 from 'spark-md5'
import ShareTo from './shareTo'
import Report from './report'
import api from '@/api/api'
import XgpVideo from './video'
export default {
    components: { ShareTo, Fav, Report, XgpVideo, Face, pswiper, PlayVideo },
    data() {
        return {
            isFull:false,
            isPlay: true,
            currentItem: {},
            showPlay: false,
            currentUser: {},
            currentRightCommentTotal: 0,
            currentRightComments: [],
            currentRightVideos: [],
            currentVideoId: '',
            userId: '',
            isMove: false,
            gTypesT: ['常用基础', '游戏角色', '游戏内容', '玩家'],
            gTypes: [{ selected: false, title: "标题界面" }, { selected: false, title: "登录注册" }, { selected: false, title: "服务器选择" }, { selected: false, title: "角色创建" }],
            gTypes1: [{ selected: false, title: "主菜单" }, { selected: false, title: "游戏公告" }, { selected: false, title: "关卡选择" }, { selected: false, title: "备战界面" }, { selected: false, title: "大厅" }],
            gTypes2: [{ selected: false, title: "画面" }, { selected: false, title: "声音" }, { selected: false, title: "操作" }, { selected: false, title: "账户" }, { selected: false, title: "其他" }],
            gTypes3: [{ selected: false, title: "转场" }, { selected: false, title: "载入画面" }, { selected: false, title: "进度条" }, { selected: false, title: "加载保存" }, { selected: false, title: "下载进度" }, { selected: false, title: "副本排队" }],
            showReport: false,
            videoItem: {},
            videoId: '',
            showFav: false,
            playbackRate: 1,
            vol: 1,
            isLplay: true,
            playIdx: 0,
            cmtVal: '',
            tab: 1,
            commentlist: [
                {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
            ],
            hasMore: true,
            params: {
                pageNum: 1,
                pageSize: 3
            },
            showShare: false,
            transMoveY: 0,
            startMoveY: 0,
            startY: 0,
            isStart: false,
            clientHeight: 0,
            flag: false,
            isCollapse: false,
            list: [],
            userParams: {
                query: {
                    pageNum: 1,
                    pageSize: 20,
                    userId: ''
                }
            },
            commentParams: {
                pageNum: 1,
                pageSize: 20,
                parentId: 0,
                commentId: '',
                orderByColumn: 'createTime',
                isAsc: 'asc'
            }
        }
    },
    destroyed() {
        window.removeEventListener('keyup', this.handleVPrev)
        window.removeEventListener('keydown', this.handleVNext)
        $(window).unbind('resize',this.resizeGetClientHeight);
    },
    mounted() {
        let token = window.localStorage.getItem('token')
        if(!token){
            this.$parent.showLoginView=true;
            return;
        }

        if (localStorage.getItem('token')) {
            this.userId = localStorage.getItem('userId');
            this.currentUser = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
        }
        
        let that = this;
        $(window).bind('resize',that.resizeGetClientHeight);
        this.clientHeight = document.getElementById('video_play_wrap').clientHeight;
        
        this.queryList();
        window.addEventListener('keyup', function (e) {
            if (e.code == 'ArrowUp') {
                that.handleVPrev();
            }
        })

        window.addEventListener('keydown', function (e) {
            if (e.code == 'ArrowDown') {
                that.handleVNext();
            } else if (e.code == 'Space') {
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        })

        this.$nextTick(() => {
            that.$refs['refSwCate'].init();
        })
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        },
        vswiper() {
            return this.$refs.videoSwiper.swiper
        }
    },
    methods: {
        resizeGetClientHeight(){
            let that=this;
            that.clientHeight = document.getElementById('video_play_wrap').clientHeight;

            that.$nextTick(()=>{
                setTimeout(()=>{
                    that.transMoveY=that.playIdx*(-that.clientHeight);
                },150)
            })
        },
        handlePlay(item) {
            this.currentVideoId = item.id;
            this.$refs['ref_video'][this.playIdx].xPlayer.switchURL(item.videoList[0].content)
            // this.$refs['ref_video'][this.playIdx].xPlayer.replay();
        },
        onWheel(e) {
            if (e.target.tagName != 'VIDEO') return;
            if (event.deltaY < 0) {
                this.handleVPrev();
            } else if (event.deltaY > 0) {
                this.handleVNext();
            }
        },
        handleCancelByGtypeAll() { },
        handleConfirmByGTypeSearch() { },
        onFavSucc() {
            this.videoItem.collectNum++;
            this.$amessage.success('已收藏，随时查看哦～' )
            this.showFav = false;
            this.videoId = '';
        },
        async handlePraiseVideo(item) {
            let res = await api.addPraise({ type: 2, praiseId: item.id });
            if (res.code == 0) {
                this.$bhelper.addCirRecord('FAV');
                this.$bhelper.addCirRecord('FAV-VIDEO');
                this.$store.dispatch('setLeftMenu',[])
                item.praiseCount = 1;
                item.praise++;
            }
        },
        onImgError(e) {
            e.target.src = require('../../assets/pro/default_uimg.svg');
            e.target.srcset = require('../../assets/pro/default_uimg.svg');
        },
        get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        handleCollapse(item, _isSwitch, _tab) {
            this.isCollapse = !this.isCollapse;
            if (_isSwitch) {
                this.tab = _tab;
            }
            if (this.isCollapse) {
                this.queryVideosById(item);
                this.queryVideoCommentsById(item);
            }
        },
        async queryVideosById(item) {
            this.userParams.query.userId = item.userId;
            let res = await api.videoList(this.userParams.query);
            this.currentRightVideos = res.data;
            // this.$forceUpdate();
        },
        async queryVideoCommentsById(item) {
            this.commentParams.commentId = item.id;
            let res = await api.getComments(this.commentParams);
            res.data.map(item => {
                item.content =this.$bhelper.replace_em(item.content);
            })
            this.currentRightComments = res.data;
            this.currentRightCommentTotal = res.total;
        },
        async handleSend(item) {
            if (!this.cmtVal) return;
            let res = await api.addComment({ type: 1, commentId: item.id, content: this.cmtVal });
            if (res.code == 0) {
                res.data.member = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
                item.comments.push(res.data);
                this.cmtVal = '';
            }
        },
        onItemDragStart(e) {
            e.stopPropagation();
            e.preventDefault();
        },
        onVideoLoadedmetadata(e, item) {
            var time = e.timeStamp;
            // that.maxVal=time;

            //分钟
            var minute = time / 60;
            var minutes = parseInt(minute);
            if (minutes < 10) {
                minutes = minutes;
            }

            //秒
            var second = time % 60;
            var seconds = Math.round(second);
            if (seconds < 10) {
                seconds = "0" + seconds;
            }

            //总共时长的秒数
            var allTime = parseInt(minutes * 60 + seconds);
            item.totalTimeStr = minutes + ':' + seconds;
        },
        onVideoEnd(_idx) {
            if (this.isLplay) {
                this.vswiper.slideNext();
            }
        },
        onPlayEnd() {
            if (this.isLplay) {
                this.handleVNext();
            }else{
                this.$refs['ref_video'][this.playIdx].xPlayer.play();
            }
        },
        onVolChange(v) {
            this.$refs['ref_video'][this.playIdx].xPlayer.volume = v;
        },
        handleMuted() {
            if (this.vol==0) {
                this.vol = 1;
                this.$refs['ref_video'][this.playIdx].xPlayer.volume = 1;
            } else {
                this.vol = 0;
                this.$refs['ref_video'][this.playIdx].xPlayer.volume = 0;
            }
        },
        chooseRate(_rate, _idx) {
            this.playbackRate = _rate;
            // this.$refs.video[this.playIdx].playbackRate = _rate;
            this.$refs['ref_video'][this.playIdx].xPlayer.playbackRate = _rate;
            // .setConfig({playbackRate:_rate});
            // this.$refs['ref_video'][this.playIdx].xPlayer.resetState();
            // this.$refs['ref_video'][this.playIdx].xPlayer.play();
            // this.$refs['ref_video'][this.playIdx].xPlayer.play();
        },
        onPlayClose() {
            this.$refs['ref_video'][this.playIdx].xPlayer.play();
            this.isPlay = true;
            this.showPlay = false;
        },
        handleFull() {
            this.isFull=!this.isFull;
            let that=this;
            this.$nextTick(()=>{
                setTimeout(()=>{
                    that.clientHeight = document.getElementById('video_play_wrap').clientHeight;
                    that.transMoveY=that.playIdx*(-that.clientHeight);
                },150)
            })
        },
        handlePlayControl(item, idx) {
            if (!this.$refs['ref_video'][idx].xPlayer.paused) {
                this.$refs['ref_video'][idx].xPlayer.pause();
                this.isPlay = false;
            } else {
                this.$refs['ref_video'][idx].xPlayer.play();
                this.isPlay = true;
            }
        },
        loadMore() {
            this.params.pageNum++;
            this.queryList();
        },
        async queryList() {
            let result = await api.videoList(this.params);

            result.data.map(item => {
                item.totalTimeStr = '00:00';
                item.isPlay = false;
                item.src = item.videoList && item.videoList.length > 0 ? item.videoList[0].content : '';
                item.comments = [];
                item.commentTotal = 0;
            })
            let totalPage = result.total % this.params.pageSize == 0 ? result.total / this.params.pageSize : parseInt(result.total / this.params.pageSize) + 1
            if (result.data && (result.data.length < this.params.pageSize || this.params.pageNum >= totalPage)) {
                this.hasMore = false
            } else {
                this.hasMore = true
            }
            // this.list=result.data;
            this.list = [...this.list, ...result.data];

            let that = this;

            this.$nextTick(() => {
                if (that.params.pageNum == 1) {
                    that.$refs['ref_video'][0].initPlayer();
                    that.$refs['ref_video'][1].initPlayer();

                    that.currentVideoId = that.list[0].id;

                    setTimeout(function () {
                        if (that.$refs['ref_video'][0])
                            that.$refs['ref_video'][0].xPlayer.replay()
                    }, 300)
                }
            })
            // if(!that.vswiper){
            // that.$nextTick(()=>{
            //     new Swiper('.video-list-box', {
            //         direction: 'vertical', // 垂直切换选项
            //         mousewheel: true, //滚轮
            //         autoplay:false,
            //         observer:true,
            //         observeParents:true,
            //         autoplayDisableOnInteraction:false,
            //         observeSlideChildren:true,
            //         slidesPerView:1,
            //         loop: false,
            //         on:{

            //         }
            //     })
            //     // let domVideos=document.querySelectorAll('.xgp-video');
            //     // let idx=0;
            //     // domVideos.forEach(_el=>{
            //     //     new XgPlayer({
            //     //         el:_el,
            //     //         controls:true,
            //     //         url:that.list[idx].src,
            //     //         // poster:that.list[idx].image,
            //     //         width:'100%',
            //     //         height:'100%',
            //     //         // autoplay:true,
            //     //         videoInit:true
            //     //     })
            //     //     idx++;
            //     // })
            // })
            // }
        },
        handleVideo(e) {
            e.stopPropagation();
            if (this.isStart) return;
            if (e.target.paused) {
                e.target.play();
            } else {
                e.target.pause();
            }
        },
        handlePrev() {
            this.swiper.slidePrev()
        },
        handleNext() {
            this.swiper.slideNext()
        },
        handleVPrev() {
            if (this.playIdx == 0) return;
            
            
            //this.vswiper.slidePrev()
            this.transMoveY += this.clientHeight;
            let that = this;
            that.$nextTick(() => {
                // that.$refs['ref_video'][that.playIdx].xPlayer.pause();
                // that.$refs['ref_video'][that.playIdx-1].xPlayer.replay();
                that.preVideo(that.playIdx);
                that.playIdx--;
                if(that.isCollapse)
                    that.queryVideoCommentsById(that.list[that.playIdx]);
                that.currentVideoId = that.list[that.playIdx].id;
            })
        },
        handleVNext() {
            if (this.playIdx == this.list.length - 1) return;
            // this.vswiper.slideNext()\
            this.transMoveY -= this.clientHeight;
            let that = this;
            that.$nextTick(() => {
                // if(that.$refs['ref_video'][that.playIdx]){
                //     that.$refs['ref_video'][that.playIdx].xPlayer.pause();
                // }
                // that.$refs['ref_video'][that.playIdx+1].xPlayer.replay();
                if ((that.playIdx + 1) % that.params.pageSize - 1 == 0 && that.hasMore) {
                    that.loadMore();
                }
                that.nextVideo(that.playIdx);
                that.playIdx++;
                if(that.isCollapse)
                    that.queryVideoCommentsById(that.list[that.playIdx]);
                that.currentVideoId = that.list[that.playIdx].id;

                // if(this.playIdx%this.params.pageSize==0&&that.hasMore){
                //     that.loadMore();
                // }
            })
        },
        onStart(e) {
            if (e.target.tagName != 'VIDEO') return;
            this.isStart = true;
            this.flag = false;
            this.startY = e.clientY;
            this.startMoveY = this.transMoveY;
        },
        onEnd(e, idx) {
            if (this.isStart) {
                let that = this;
                this.isStart = false;
                this.isMove = false;
                let endY = e.clientY - this.startY;
                if (Math.abs(endY) < this.clientHeight / 4) {
                    this.transMoveY = this.startMoveY;
                } else {
                    if (endY < 0) {
                        if ((this.playIdx + 1) % this.params.pageSize - 1 == 0 && this.hasMore) {
                            this.loadMore();
                        }
                        //下一个
                        if (this.list[idx + 1]) {
                            this.playIdx = idx + 1;
                            if(this.isCollapse)
                                this.queryVideoCommentsById(this.list[this.playIdx]);
                            this.currentVideoId = this.list[this.playIdx].id;
                            this.transMoveY = this.startMoveY - this.clientHeight;
                            that.$nextTick(() => {
                                that.nextVideo(idx);
                            })
                        } else {
                            this.transMoveY = this.startMoveY;
                        }
                    } else {
                        //上一个
                        if (this.list[idx - 1]) {
                            this.playIdx = idx - 1;
                            if(this.isCollapse)
                                this.queryVideoCommentsById(this.list[this.playIdx]);
                            this.currentVideoId = this.list[this.playIdx].id;
                            this.transMoveY = this.startMoveY + this.clientHeight;
                            that.$nextTick(() => {
                                // document.getElementById('xgp_video_'+(idx-1)).innerHTML='';
                                // document.getElementById('xgp_video_'+(idx-2)).innerHTML='';

                                that.preVideo(idx);
                            })
                        } else {
                            this.transMoveY = this.startMoveY;
                        }
                    }
                }
                this.flag = true;
            }
        },
        nextVideo(idx) {
            let that = this;
            if (that.$refs['ref_video'][idx]) {
                that.$refs['ref_video'][idx].xPlayer.destroy();
                that.$refs['ref_video'][idx].xPlayer = null;
            }
            // document.getElementById('xgp_video_'+(idx+1)).innerHTML='';
            // document.getElementById('xgp_video_'+(idx+2)).innerHTML='';
            if (that.$refs['ref_video'][idx + 1])
                that.$refs['ref_video'][idx + 1].initPlayer();
            if (that.$refs['ref_video'][idx + 2])
                that.$refs['ref_video'][idx + 2].initPlayer();

            setTimeout(function () {
                if (that.$refs['ref_video'][idx + 1])
                    that.$refs['ref_video'][idx + 1].xPlayer.replay()
            }, 300)
        },
        preVideo(idx) {
            let that = this;
            if (that.$refs['ref_video'][idx - 1])
                that.$refs['ref_video'][idx - 1].initPlayer();
            if (that.$refs['ref_video'][idx - 2])
                that.$refs['ref_video'][idx - 2].initPlayer();

            that.$refs['ref_video'][idx].xPlayer.destroy();
            that.$refs['ref_video'][idx].xPlayer = null;

            setTimeout(function () {
                if (that.$refs['ref_video'][idx - 1])
                    that.$refs['ref_video'][idx - 1].xPlayer.replay()
            }, 300)
        },
        onMove(e) {
            if (!this.isStart) return;
            let moveY = e.clientY - this.startY;
            this.transMoveY = moveY + this.startMoveY;
            this.isMove = true;
        }
    }
}
</script>

<style lang="less">
.tip-top {
    text-align: left;
    font-size: 16px;
    color: #969696;
    line-height: 20px;
    margin-bottom: 12px;
}

.short-video-page {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;

    .cate-page-prev {
        background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
        width: 80px;
        height: 46px;
        transform: rotate(180deg);
        z-index: 1;
        left: 0px !important;

        &:after {
            display: none;
        }

        &:hover {
            background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
            opacity: .6 !important;
        }
    }

    .cate-page-next {
        background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
        width: 80px;
        height: 46px;
        z-index: 1;
        right: 0px;

        &:after {
            display: none;
        }

        &:hover {
            background: url('../../assets/pro/right_label_arrow.svg') no-repeat;
            opacity: .6 !important;
        }
    }

    .video-play-wrap {
        margin-top: 29px;
        height: calc(100vh - (29px + 40px + 44px + 84px + 14px));
        overflow: hidden;
        // border:1px solid red;
        position: relative;
        transition: .1s all linear;
        cursor: pointer;
        border-radius: 30px;
        overflow: hidden;

        .video-list-box {
            height: 100%;
            // position: absolute;
            position: relative;
            // webkit-transform: translateZ(0);
            // transition:transform .3s linear;
            transition-duration: 300ms;

            .video-data-item {
                // border:1px solid red;
                // height:100% !important;
                user-select: none;
                height: 100% !important;
                background: #555555;
                position: relative;
                display: flex;
                // margin-bottom:20px;
                border-radius: 30px;
                overflow: hidden;

                >.left {
                    width: 100%;
                    position: relative;

                    .right-bar {
                        z-index: 11112;
                        position: absolute;
                        right: 46px;
                        bottom: 90px;
                        color: #fff;

                        .page-bar{
                            position: relative;
                            right:0px;
                            bottom:32px;
                        }

                        >a {
                            display: block;
                            margin-bottom: 20px;
                            text-align: center;
                            position: relative;

                            &:before {
                                margin-bottom: 3px !important;
                            }

                            .cus-tooltip {
                                position: absolute;
                                background: #23232A;
                                border-radius: 8px;
                                text-align: center;
                                line-height: 31px;
                                height: 31px;
                                display: inline-block;
                                width: 54px;
                                box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
                                left: -70px;
                                top: 15%;
                                opacity: 0;
                                z-index: -1;
                                transition: .2s all linear;
                            }

                            &:hover {
                                .cus-tooltip {
                                    opacity: 1;
                                    z-index: 1;
                                }
                            }
                        }

                        .u-box {
                            position: relative;

                            img {
                                object-fit: cover;
                                width: 40px;
                                height: 40px;
                                border-radius: 40px;
                            }

                            .aten-btn {
                                background: url('../../assets/pro/videobar/small_attention_ico.svg') no-repeat;
                                background-size: cover;
                                width: 20px;
                                height: 20px;
                                position: absolute;
                                left: calc((100% - 20px) / 2);
                                bottom: -8px;
                            }
                        }

                        .zan {
                            &:before {
                                content: '';
                                background: url('../../assets/pro/videobar/zan.svg') no-repeat;
                                background-position: center;
                                background-size: cover;
                                width: 28px;
                                height: 28px;
                                display: block;
                                margin: 0 auto;
                            }
                        }

                        .comment {
                            &:before {
                                content: '';
                                background: url('../../assets/pro/videobar/comment.svg') no-repeat;
                                background-position: center;
                                background-size: cover;
                                width: 28px;
                                height: 28px;
                                display: block;
                                margin: 0 auto;
                            }
                        }

                        .fav {
                            &:before {
                                content: '';
                                background: url('../../assets/pro/videobar/fav.svg') no-repeat;
                                background-position: center;
                                background-size: cover;
                                width: 28px;
                                height: 28px;
                                display: block;
                                margin: 0 auto;
                            }
                        }

                        .share {
                            background: url('../../assets/pro/videobar/share.svg') no-repeat;
                            background-position: center;
                            background-size: cover;
                            width: 28px;
                            height: 28px;
                            display: block;
                            margin: 0 auto;
                            margin-bottom: 20px;
                        }

                        .more {
                            background: url('../../assets/pro/videobar/more.svg') no-repeat;
                            background-position: center;
                            background-size: cover;
                            width: 28px;
                            height: 28px;
                            display: block;
                            margin: 0 auto;
                            margin-bottom: 20px;
                        }
                    }

                    video {
                        // width:100%;
                        // height:100%;
                        // // object-fit: cover;
                        // position: relative;
                        // z-index:1;
                    }

                    .basic {
                        position: absolute;
                        bottom: 0px;
                        padding-left: 34px;
                        padding-bottom: 30px;
                        padding-right: 38px;
                        left: 0px;
                        right: 0px;
                        z-index: 11111;

                        .author {
                            font-size: 20px;
                            font-weight: 500;

                            .time {
                                font-size: 14px;
                                font-weight: normal;
                            }
                        }

                        .title {
                            font-size: 16px;
                            line-height: 22px;
                            margin-top: 16px;
                            margin-bottom: 44px;
                        }
                    }

                    .all-mask {
                        position: absolute;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        height: 100%;
                        // opacity:0;
                        background: transparent;
                        z-index: 111;
                    }

                    .bot-mask {
                        position: absolute;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        height: 233px;
                        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
                        z-index: 11110;
                    }

                    .progress-bar {
                        .el-slider__button {
                            border-color: #fff;
                        }

                        .el-slider__bar {
                            background: #fff;
                        }

                        .el-slider__runway {
                            background: #70707A;
                        }
                    }

                    .bar-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        opacity: 1;
                        height: 42px;
                        position: absolute;
                        bottom: 0px;
                        padding-left: 34px;
                        padding-right: 38px;
                        z-index: 11112;

                        .laction {
                            display: flex;
                            align-items: center;

                            .play-btn {
                                width: 30px;
                                height: 30px;
                                background: url('../../assets/pro/videobar/play.svg') no-repeat;
                                background-size: cover;
                                display: block;
                                margin-right: 10px;

                                &:hover {
                                    background: url('../../assets/pro/videobar/play_select.svg') no-repeat;
                                }

                                &.active {
                                    background: url('../../assets/pro/videobar/pause.svg') no-repeat;

                                    &:hover {
                                        background: url('../../assets/pro/videobar/pause_select.svg') no-repeat;
                                    }
                                }
                            }
                        }

                        .r-actions {
                            display: flex;
                            align-items: center;

                            .auto-l-play {
                                .switch {
                                    margin-left: 10px;
                                }
                            }

                            .vol-btn-wrap {
                                position: relative;
                                display: block;
                                margin: 0px 10px;
                                display: flex;
                                align-items: center;
                                // border:1px solid red;
                                .vol-btn {
                                    background: url('../../assets/pro/videobar/vol.svg') no-repeat;
                                    width: 30px;
                                    height: 30px;
                                    position: relative;
                                    &:hover{
                                        background: url('../../assets/pro/videobar/vol_select.svg') no-repeat;
                                    }

                                    &.muted {
                                        background: url('../../assets/pro/videobar/vol_muted.svg') no-repeat;

                                        &:hover {
                                            background: url('../../assets/pro/videobar/vol_muted_select.svg') no-repeat;
                                        }
                                    }
                                }


                                &:hover {
                                    .b-wrap {
                                        display: block;
                                    }

                                    &:after {
                                        content: '';
                                        position: absolute;
                                    }
                                }

                                .b-wrap {
                                    position: absolute;
                                    z-index: 99999;
                                    bottom:30px;
                                    left:-5px;
                                    // height: 193px;
                                    padding-bottom: 20px;
                                    width: 40px;
                                    display: none;

                                    .b-con-box {
                                        width: 40px;
                                        // height:170px;
                                        padding-top: 7px;
                                        padding-bottom: 40px;
                                        background: #23232A;
                                        box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
                                        display: inline-block;
                                        border-radius: 7px;

                                        .val {
                                            text-align: center;
                                            display: block;
                                        }

                                        .el-slider__runway{
                                            width:4px;
                                        }
                                        .el-slider__button-wrapper{
                                            width:12px;height:12px;
                                            left:-6px;
                                        }
                                        .el-slider__bar{
                                            width:4px;
                                        }
                                        .el-slider {
                                            height: 125px;
                                            top: 20px;
                                            left:3px;
                                            .el-slider__button {
                                                border-color: #fff;
                                            }

                                            .el-slider__bar {
                                                background: #11CCB1;
                                            }

                                            .el-slider__runway {
                                                background: #70707A;
                                            }
                                        }
                                    }
                                }

                            }

                            .fun-bs {
                                margin-left: 10px;
                                position: relative;
                                line-height: 30px;
                                height: 30px;
                                width:28px;
                                text-align: center;
                                &:hover {
                                    .b-wrap {
                                        display: inherit;
                                    }
                                }

                                .b-wrap {
                                    position: absolute;
                                    z-index: 99999;
                                    bottom: 10px;
                                    // height: 193px;
                                    padding-bottom: 40px;
                                    left: -15px;
                                    width: 56px;
                                    display: none;

                                    .b-con-box {
                                        width: 56px;
                                        // height:170px;
                                        background: #23232A;
                                        box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
                                        display: inline-block;
                                        border-radius: 7px;
                                        padding-top: 16px;
                                        display: flex;
                                        flex-direction: column;
                                        grid-gap:18px;
                                        padding-bottom:18px;
                                        .speed-item {
                                            font-size: 12px;
                                            font-weight: 500;
                                            display: block;
                                            text-align: center;
                                            // margin-bottom: 18px;
                                            line-height:17px;
                                            &:hover {
                                                color: #11CCB1;
                                            }

                                            &.active {
                                                color: #11CCB1;
                                            }
                                        }
                                    }
                                }
                            }

                            .full-screen-btn {
                                width: 30px;
                                height: 30px;
                                background: url('../../assets/pro/videobar/full_screen.svg') no-repeat;
                                display: block;

                                &:hover {
                                    background: url('../../assets/pro/videobar/full_screen_select.svg') no-repeat;
                                }
                            }
                            .el-switch__core{
                                opacity:.8;
                                transition:.1s all linear;
                                &:hover{
                                    opacity:1;
                                }
                            }
                        }
                    }

                    .cover-blur {
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        right: 0px;
                        height: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            opacity: .8;
                            filter: blur(60px);
                        }
                    }
                }

                .fixed-right-conbox {
                    height: 100%;
                    width: 0px;
                    position: relative;
                    cursor: default;
                    z-index: 101;

                    .collapse-rbar {
                        position: absolute;
                        width: 26px;
                        height: 50px;
                        background: url('../../assets/pro/videobar/collapse.svg') no-repeat;
                        background-size: cover;
                        left: -26px;
                        bottom: calc((100% - 50px) / 2);
                    }

                    &.active {
                        // max-width:400px;
                        // width:420px;
                        width: max-content;
                        max-width: 420px;
                        min-width: 420px;
                        padding: 18px 20px;

                        &:before {
                            content: '';
                            position: absolute;
                            left: 0px;
                            right: 0px;
                            top: 0px;
                            width: 100%;
                            height: 100%;
                            backdrop-filter: saturate(180%) blur(16px);
                            background: rgba(0, 0, 0, 0.5);
                        }

                        .collapse-rbar {
                            background: url('../../assets/pro/collapsed.svg') no-repeat;
                            background-size: cover;
                        }
                    }

                    .n-box {
                        height: 100%;
                        position: relative;

                        .tabs {
                            display: flex;
                            align-items: center;
                            font-size: 16px;
                            font-weight: 500;
                            color: #969696;
                            position: relative;

                            span {
                                cursor: pointer;

                                &:first-child {
                                    margin-right: 30px;
                                }
                            }

                            .active {
                                color: #fff;
                                position: relative;

                                &:after {
                                    content: '';
                                    height: 2px;
                                    width: 17px;
                                    background: #fff;
                                    border-radius: 2px;
                                    position: absolute;
                                    left: calc((100% - 17px) / 2);
                                    bottom: -5px;
                                }
                            }
                        }

                        .tab-work {
                            height: 100%;
                            padding-bottom: 20px;

                            .total-comment {
                                color: #969696;
                                font-size: 14px;
                                font-weight: 500;
                                margin-top: 22px;
                                margin-bottom: 20px;
                                line-height: 20px;
                            }

                            .comment-list {
                                max-height: calc(98% - 92px);
                                overflow-y: auto;
                                padding-right: 20px;
                                min-height: calc(98% - 92px);

                                &::-webkit-scrollbar {
                                    width: 8px;
                                    height: 8px;
                                    background-color: transparent;
                                }

                                /*滚动条的轨道*/
                                &::-webkit-scrollbar-track {
                                    background-color: transparent;
                                }

                                /*滚动条的滑块按钮*/
                                &::-webkit-scrollbar-thumb {
                                    border-radius: 8px;
                                    background-color: #626262;
                                }

                                /*滚动条的上下两端的按钮*/
                                &::-webkit-scrollbar-button {
                                    height: 0;
                                }

                                /* 两个滚动条的交汇处 */
                                &::-webkit-scrollbar-corner {
                                    background-color: transparent;
                                }

                                .comment-item {
                                    display: flex;
                                    margin-bottom: 20px;

                                    .img-box {
                                        width: 34px;
                                        height: 34px;
                                        min-width: 34px;
                                        border-radius: 34px;
                                        margin-right: 12px;
                                        overflow: hidden;
                                    }

                                    .con-box {
                                        .uname {
                                            font-size: 12px;
                                            color: #969696;
                                        }

                                        .con-descr {
                                            font-size: 14px;
                                            color: #fff;
                                            line-height: 20px;
                                            margin-top: 7px;
                                            margin-bottom: 7px;

                                            img {
                                                width: 20px;
                                                height: 20px;
                                            }
                                        }

                                        .time {
                                            color: #969696;
                                            font-size: 12px;
                                        }

                                        .nums {
                                            margin-top: 12px;

                                            .cmt {
                                                background: url('../../assets/pro/videobar/video_cmt.svg') no-repeat;
                                                padding-left: 27px;
                                                background-size: 20px 20px;
                                                background-position: left center;
                                                margin-right: 19px;
                                            }

                                            .share {
                                                background: url('../../assets/pro/videobar/video_cmt_share.svg') no-repeat;
                                                padding-left: 27px;
                                                background-size: 20px 20px;
                                                background-position: left center;
                                                margin-right: 19px;
                                            }

                                            .zan {
                                                background: url('../../assets/pro/videobar/video_cmt_zan.svg') no-repeat;
                                                padding-left: 27px;
                                                background-size: 20px 20px;
                                                background-position: left center;
                                            }
                                        }

                                        button {
                                            margin-top: 20px;
                                            background: transparent;
                                            border: none;
                                            display: flex;
                                            align-items: center;
                                            color: #969696;
                                            font-weight: 500;
                                            background-image: url('../../assets/pro/videobar/video_cmt_more.svg');
                                            background-repeat: no-repeat;
                                            background-position: right center;
                                            background-size: 12px 12px;
                                            padding-right: 14px;
                                            cursor: pointer;

                                            &:hover {
                                                color: #fff;
                                            }

                                            .line {
                                                height: 1px;
                                                width: 37px;
                                                background: #979797;
                                                margin-right: 9px;
                                            }
                                        }

                                        .sub-comments {
                                            margin-top: 20px;
                                        }
                                    }
                                }
                            }

                            .send-mbox {
                                display: flex;
                                align-items: center;
                                margin-bottom: 48px;

                                .u-img {
                                    min-width: 34px;
                                    height: 34px;
                                    border-radius: 34px;
                                    overflow: hidden;
                                    margin-right: 12px;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }

                                .right {
                                    width: 100%;
                                    position: relative;
                                    display: flex;
                                    align-items: center;

                                    input {
                                        background: #1F1B1A;
                                        width: 100%;
                                        border: none;
                                        border: none;
                                        line-height: 44px;
                                        padding-left: 16px;
                                        font-size: 14px;
                                        color: #fff;
                                        border-radius: 22px;
                                        padding-right: 95px;
                                    }

                                    .opbtns {
                                        position: absolute;
                                        right: 0px;
                                        display: flex;
                                        align-items: center;

                                        .face-btn {
                                            width: 20px;
                                            height: 20px;
                                            background: url('../../assets/pro/top_cmt_face.svg') no-repeat;
                                            background-size: cover;
                                            display: flex;
                                            align-items: center;
                                            margin-right: 13px;

                                            &:after {
                                                content: '';
                                                width: 1px;
                                                background: #484848;
                                                height: 18px;
                                                margin: 0px 13px;
                                                position: absolute;
                                                left: 20px;
                                            }

                                            &:hover {
                                                background: url('../../assets/pro/top_cmt_face_active.svg') no-repeat;
                                                background-size: cover;
                                            }
                                        }

                                        .send-btn {
                                            width: 24px;
                                            height: 24px;
                                            background: url('../../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                                            background-size: cover;
                                            margin-left: 13px;
                                            margin-right: 15px;
                                        }
                                    }
                                }
                            }
                        }

                        .author {
                            display: flex;
                            align-items: center;
                            margin-top: 20px;
                            position: relative;
                            justify-content: space-between;

                            .left {
                                display: flex;
                                align-items: center;

                                .img-box {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50px;
                                    overflow: hidden;
                                    margin-right: 14px;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }

                                .basic {
                                    .name {
                                        font-size: 16px;
                                        font-weight: 500;
                                    }

                                    .desc {
                                        margin-top: 7px;
                                        font-size: 12px;
                                    }
                                }
                            }

                            .follow-btn {
                                width: 80px;
                                line-height: 44px;
                                border-radius: 8px;
                                background: #11CCB1;
                                color: #fff;
                                text-align: center;
                                border-radius: 8px;
                                user-select: none;
                                font-size: 16px;
                                font-weight: 500;
                            }
                        }

                        .work-list-wrap {
                            // padding-right:4px;
                            margin-top: 41px;
                            overflow-y: auto;
                            position: relative;
                            max-height: calc(100% - 112px);

                            /*滚动条整体部分,必须要设置*/
                            &::-webkit-scrollbar {
                                width: 5px;
                                height: 8px;
                                background-color: transparent;
                            }

                            /*滚动条的轨道*/
                            &::-webkit-scrollbar-track {
                                background-color: transparent;
                            }

                            /*滚动条的滑块按钮*/
                            &::-webkit-scrollbar-thumb {
                                border-radius: 8px;
                                background-color: #626262;
                            }

                            /*滚动条的上下两端的按钮*/
                            &::-webkit-scrollbar-button {
                                height: 0;
                            }

                            /* 两个滚动条的交汇处 */
                            &::-webkit-scrollbar-corner {
                                background-color: transparent;
                            }
                        }

                        .work-list {
                            display: flex;
                            flex-wrap: wrap;

                            .work-item {
                                width: 170px;
                                height: 96px;
                                border-radius: 16px;
                                margin-bottom: 20px;
                                position: relative;
                                overflow: hidden;

                                &:after {
                                    content: '';
                                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
                                    position: absolute;
                                    width: 100%;
                                    height: 51px;
                                    z-index: 1;
                                    left: 0;
                                    bottom: 0;
                                }

                                &:hover {
                                    >img {
                                        transform: scale(1.08);
                                    }
                                }

                                &:nth-child(2n) {
                                    margin-left: 20px;
                                }

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }

                                .basic-con {
                                    position: absolute;
                                    bottom: 0px;
                                    left: 0px;
                                    right: 0px;
                                    padding-left: 9px;
                                    padding-bottom: 7px;
                                    z-index: 2;

                                    .fav {
                                        background: url('../../assets/pro/videobar/video_m_zan.svg') no-repeat;
                                        background-position: left center;
                                        padding-left: 17px;
                                    }
                                }

                                // background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);

                                &.played {
                                    .played-text {
                                        font-size: 12px;
                                        font-weight: 500;
                                        position: absolute;
                                        top: 0px;
                                        height: 100%;
                                        border-radius: 16px;
                                        left: 0px;
                                        z-index: 2;
                                        backdrop-filter: saturate(90%) blur(16px);
                                        background: linear-gradient(180deg, rgba(0, 0, 0, 0.51) 0%, rgba(0, 0, 0, 0.5) 100%);
                                        right: 0px;
                                        line-height: 96px;
                                        text-align: center;
                                        padding-top: 10px;

                                        &:before {
                                            content: '';
                                            width: 20px;
                                            height: 20px;
                                            background: url('../../assets/pro/played.svg') no-repeat;
                                            background-size: cover;
                                            position: absolute;
                                            top: 25%;
                                            left: 43%;
                                        }
                                    }
                                }
                            }
                        }

                        &.show {
                            // width:420px;
                        }
                    }
                }

                &.active {
                    >.left {
                        width: calc(100% - 420px);

                        transition: .1s all linear;
                    }

                    .fixed-right-conbox {
                        width: 420px;
                        padding: 18px 20px;

                        .n-box {
                            position: relative;
                            z-index: 2;
                        }

                        &:before {
                            content: '';
                            position: absolute;
                            left: 0px;
                            right: 0px;
                            top: 0px;
                            width: 100%;
                            height: 100%;
                            backdrop-filter: saturate(180%) blur(16px);
                            background: rgba(0, 0, 0, 0.5);
                        }
                    }
                }

                &:hover {
                    .basic {
                        // z-index: 1111;

                        .bar-row {
                            // opacity: 1;
                        }
                    }
                }
            }

        }

        .animateClass {
            transition-duration: 0ms;
        }

        &.is-full{
            position: fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            height:100%;
            z-index: 107;
            margin-top:0px;
            border-radius:0px;
            animation: fadeIn .3s ease-in-out forwards;
            .video-data-item{
                border-radius:0 !important;
            }
        }
    }


    .page-bar {
        position: absolute;
        right: -40px;
        bottom: calc((100% - 70px) / 2);

        button {
            border: none;
            cursor: pointer;
        }

        .prev {
            width: 35px;
            height: 35px;
            background: url('../../assets/pro/videobar/prev_select.svg') no-repeat;
            background-size: cover;
            display: block;

            &:hover {
                background: url('../../assets/pro/videobar/prev_selected.svg') no-repeat;
                background-size: cover;
            }
        }

        .next {
            width: 35px;
            height: 35px;
            background: url('../../assets/pro/videobar/next_select.svg') no-repeat;
            background-size: cover;
            display: block;

            &:hover {
                background: url('../../assets/pro/videobar/next_selected.svg') no-repeat;
                background-size: cover;
            }
        }
    }

    .nav-cates {
        list-style: none;
        font-size: 16px;
        display: flex;
        align-items: center;
        // padding-left: 30px;
        // padding-right: 80px;

        li {
            line-height: 44px;
            border-radius: 44px;
            text-align: center;
            // min-width:100px;
            width: auto !important;
            background: #1D1D1F;
            display: block !important;
            margin-right: 20px;
            color: #6A6976;

            a {
                display: inline-block;
                width: 100%;
                padding: 0px 26px;
                white-space: nowrap;
            }

            &:hover {
                background: #323232;
                color: #fff;
            }
        }
    }
}
</style>